<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#choose{
				width: 160px;
				height: 40px;
				border: 1px solid gold;
				margin: 400px auto;
				display: flex;
				justify-content: space-around;
				list-style: none;
			}
			img{
				cursor: pointer;
			}
			#reChoose{
				position: absolute;
				top: 500px;
				left: 725px;
			}
		</style>
	</head>
	<body>
		
		<div id="choose">
			<img id="0" src="img/star_06.gif"/>
			<img id="1" src="img/star_06.gif"/>
			<img id="2" src="img/star_06.gif"/>
			<img id="3" src="img/star_06.gif"/>
			<img id="4" src="img/star_06.gif"/>
		</div>
	
		<input type="button" value="重新评价" id="reChoose" />
		
		
		<script type="text/javascript">
			var imgs = document.querySelectorAll("img");
			var choose = document.getElementById("choose");
			choose.onmouseover = function (e) {
				var e = event || window.event;
				var target = e.target || e.srcElement;
				if(target.tagName.toLowerCase() == "img" && JSON.parse(localStorage.newTest)){
//					console.log(target);
					var num = parseInt(target.getAttribute("id"));
					console.log(num);
					var newArr = Array.from(choose.children);
					var subArr = newArr.splice(0,num + 1);
					for(var i = 0;i <= num;i++){
						imgs[i].setAttribute("src","img/star_03.gif");
					}
				}
			}
			var test = true;
			var newTest = JSON.stringify(test);
			localStorage.newTest = newTest;
		
				choose.onmouseout = function (e) {
					var e = event || window.event;
					var target = e.target || e.srcElement;
					if(target.tagName.toLowerCase() == "img" && JSON.parse(localStorage.newTest)){
						var num = parseInt(target.getAttribute("id"));
						console.log(num);
						var newArr = Array.from(choose.children);
						var subArr = newArr.splice(0,num + 1);
						for(var i = 0;i <= num;i++){
							imgs[i].setAttribute("src","img/star_06.gif");
							
						}
					}
				}
				
			
			
			choose.onclick = function (e) {
				var e = event || window.event;
				var target = e.target || e.srcElement;
				var test = false;
				var newTest = JSON.stringify(test);
				localStorage.newTest = newTest;
				if(target.tagName.toLowerCase() == "img" && JSON.parse(localStorage.newTest)){
//					console.log(target);
					
					var num = parseInt(target.getAttribute("id"));
					console.log(num);
					var newArr = Array.from(choose.children);
					var subArr = newArr.splice(0,num + 1);
					for(var i = 0;i <= num;i++){
						imgs[i].setAttribute("src","img/star_03.gif");
					} 
					
				} 
//				else {
//						test = true;
//						newTest = JSON.stringify(test);
//						localStorage.newTest = newTest;
//				}
			}
			
			var reChoose = document.getElementById("reChoose");
			reChoose.onclick = function(){
				var test = true;
				var newTest = JSON.stringify(test);
				localStorage.newTest = newTest;
				for(var i = 0;i < imgs.length;i++)
				imgs[i].setAttribute("src","img/star_06.gif");
			}
//			choose.onclick = function(e){
//				var e = event || window.event;
//				var targetTwo = e.target || e.srcElement;
//				if(targetTwo.tagName.toLowerCase() == "img" && targetTwo != target){
//					var test = false;
//					var newTest = JSON.stringify(test);
//					localStorage.newTest = newTest;
//				}
//				
//			}
		</script>
	</body>
</html>
